
<template>
  <div id="app">
    <b-modal ref="myWarning" hide-footer title="提示">
      <div class="d-block text-center">
        <h3>{{message}}</h3>
      </div>
    </b-modal>

    <div class="header">
      <b-navbar toggleable="lg" type="dark" variant="dark">
        <b-navbar-toggle target="nav_collapse"></b-navbar-toggle>

        <b-navbar-brand
          style="font-family:Segoe UI, Microsoft YaHei; font-weight: bold; color: #70DCA6;"
        >
          <a href="/">
            <img src="@/assets/img/index/logo1.png" alt="去首页" style="height:30px" />
          </a>
        </b-navbar-brand>

        <b-collapse is-nav id="nav_collapse">
          <b-navbar-nav style="margin-left: 60px;" v-show="category">
            <b-nav-item-dropdown :text="category + ' - 艺人列表'" left>
              <div v-for="(item, index) in artistList" :key="index" style="line-height: 1.1">
                <b-dropdown-item
                 :to="{path: '/artist/'+item.alias}"
                >
                  <span v-if="item" style="font-size: 12px;">
                    {{item.name}}
                    <span style="color: grey;">{{item.name_chs}}</span>
                  </span>
                </b-dropdown-item>
              </div>
            </b-nav-item-dropdown>
          </b-navbar-nav>

          <b-navbar-nav v-show="artist">
            <b-nav-item>
              <router-link
                :to="{name: 'artist-name', params: {name: artist}}"
              >
                <nobr>艺人介绍</nobr>
              </router-link>
            </b-nav-item>
            <!-- <b-nav-item><router-link :to="{path: 'member'}">乐队成员</router-link></b-nav-item> -->
            <b-nav-item :disabled=!num_img>
              <nobr>
                <router-link
                  :to="{name: 'artist-name-images', params: {name: artist}}"
                >艺人图片</router-link>&nbsp;
                <b-badge variant="light">{{num_img}}</b-badge>
              </nobr>
            </b-nav-item>
            <!-- <b-nav-item><router-link :to="{path: 'link'}">乐队链接</router-link></b-nav-item> -->
            <b-nav-item-dropdown text="艺人作品" id="show-album">
              <b-dropdown-item
                :to="{name: 'artist-name-albumlist', params: {name: artist}, query: {category: 'studio'}}"
				:disabled=!num_studio
              >
                录音室专辑&nbsp;
                <b-badge pill>{{num_studio}}</b-badge>
              </b-dropdown-item>
              <b-dropdown-item
                :to="{name: 'artist-name-albumlist', params: {name: artist}, query: {category: 'live'}}"
				:disabled=!num_live
              >
                现场专辑&nbsp;
                <b-badge pill>{{num_live}}</b-badge>
              </b-dropdown-item>
			  <b-dropdown-item
                :to="{name: 'artist-name-albumlist', params: {name: artist}, query: {category: 'compilation'}}"
				:disabled=!num_compilation
              >
                精选专辑&nbsp;
                <b-badge pill>{{num_compilation}}</b-badge>
              </b-dropdown-item>
              <!--<b-dropdown-item :to="{name: 'albumlist', query: {id: 'albumlist', name: artist.alias, category: 'single'}}">EP/单曲</b-dropdown-item>-->
              <b-dropdown-item
                :to="{name: 'artist-name-albumlist', params: {name: artist}, query: {category: 'video'}}"
				:disabled=!num_video
              >
                录影带&nbsp;
                <b-badge pill>{{num_video}}</b-badge>
              </b-dropdown-item>
            </b-nav-item-dropdown>
			<b-tooltip ref="tooltip1" target="show-album" variant="light">
              显示所有专辑的列表
             </b-tooltip>
          </b-navbar-nav>

          <!-- Right aligned nav items -->
          <b-navbar-nav class="ml-auto">
            <b-nav-form>
              <b-input-group size="sm" class="mb-0">
                <b-input-group-prepend is-text>
                  <b-icon icon="search" font-scale="1"></b-icon>
                </b-input-group-prepend>
                <b-form-input
                  class="mr-sm-2 search"
                  type="search"
                  placeholder
                  v-model="searchVal"
                  v-on:focus="focus_all()"
                  list="mylist_all"
                />
                <datalist id="mylist_all">
                  <option v-for="(value, index) in fuzzy_list" :key="index">
                    <span v-if="value.cover">《{{value.name}}》</span>
                    <span v-else>{{value.name}}</span>
                  </option>
                </datalist>
              </b-input-group>
              <b-button size="sm" class="my-2 my-sm-0" type="submit" @click.prevent="search()">搜索</b-button>
            </b-nav-form>
            <!-- &nbsp;&nbsp;&nbsp;
              <b-nav-form>
                <b-form-input size="sm" class="mr-sm-2 album" type="text" placeholder="" v-model="searchVal_album" v-on:focus="focus_album()" list="mylist_album"/>           
                <datalist id="mylist_album">
                   <option v-for="(value,index) in fuzzy_list">{{value.name}}</option>
                </datalist>
                <b-button size="sm" class="my-2 my-sm-0" type="submit" @click.prevent="searchAlbum()">搜索专辑</b-button>
            </b-nav-form>-->
            &nbsp;&nbsp;&nbsp;&nbsp;
            <b-nav-item right>
              <router-link :to="{path: '/albumsearch'}">
                <span id="Popover5">
                  <nobr>高级搜索</nobr>
                </span>
              </router-link>
            </b-nav-item>&nbsp;&nbsp;
            <b-nav-item right>
              <nobr>
                <router-link :to="{path: '/comment'}">留言板</router-link>&nbsp;
                <b-badge variant="light">
                  <span v-if="num_comments">{{num_comments}}</span>
                </b-badge>
              </nobr>
            </b-nav-item>&nbsp;&nbsp;
            <b-nav-item right>
              <router-link :to="{path: '/register'}">
                <nobr>用户注册</nobr>
              </router-link>
            </b-nav-item>&nbsp;&nbsp;
            <b-nav-item v-if="login" right>
              <router-link :to="{path: '/user'}">
                <nobr>{{user}},你好&nbsp;</nobr>
              </router-link>
            </b-nav-item>
            <b-button
              size="sm"
              v-if="login"
              v-on:click="logout"
              style="margin-top:3px; height:30px; width:50px"
            >注销</b-button>
            <b-nav-item v-else>
              <router-link :to="{path: '/login'}">
                <nobr>用户登录</nobr>
              </router-link>
            </b-nav-item>
          </b-navbar-nav>
        </b-collapse>
      </b-navbar>
    </div>

    <div id="modal-overlay" v-if="showLoading">
      <div class="loading">
        <div class="label">
          <span
            style="color: white; font-family: Segoe UI, Microsoft Yahei, Verdana, Helvetica Neue, Tahoma, Arial, sans-serif; font-size: 18px;"
          >Without Music, Life Would Be a Mistake</span>
        </div>
        <div class="loadEffect">
          <span></span>
          <span></span>
          <span></span>
          <span></span>
          <span></span>
          <span></span>
          <span></span>
          <span></span>
        </div>
      </div>
    </div>

    <!--<Loading v-if="showLoading"></Loading>-->
    <!--<transition name="transitionRouter">-->
    <router-view
      v-wechat-title="$route.meta.title"
      :parent="parent"
      v-on:numImages="numImages($event)"
      v-on:numAlbums="numAlbums($event)"
      v-on:refreshComment="refreshComment($event)"
      v-on:showCategory="showCategory($event)"
      v-on:showArtist="showArtist($event)"
    ></router-view>
    <!--</transition>-->

    <div class="footer">
      <a
        href="http://www.allmusic.com/"
        target="_blank"
        id="Popover1"
        rel="noopener noreferrer"
      >AllMusic</a>&nbsp;&nbsp;|&nbsp;&nbsp;
      <a
        href="https://rateyourmusic.com/"
        target="_blank"
        id="Popover2"
        rel="noopener noreferrer"
      >RateYourMusic</a>&nbsp;&nbsp;|&nbsp;&nbsp;
      <a
        href="https://www.albumoftheyear.org/"
        target="_blank"
        id="Popover3"
        rel="noopener noreferrer"
      >AOTY</a>&nbsp;&nbsp;|&nbsp;&nbsp;
      <router-link :to="{path: '/about'}" id="Popover4">About</router-link>
      <br />
      <p>
        <span style="color: white">©2019-2024 britmusic.cn</span>
        <a href="https://beian.miit.gov.cn" rel="noopener noreferrer">苏ICP备19001974号-1</a>
        <br />Powered by BootstrapVue, Nuxt.js, Django and Docker
      </p>
    </div>

    <b-popover
      target="Popover1"
      placement="top"
      title="www.allmusic.com"
      triggers="hover focus"
      content="AllMusic是美国的音乐向导网站，全世界最大的音乐资料库和最权威的音乐评级媒体，内容还包括音乐家传记和唱片评论（大陆DNS解析有问题，访问需梯子）"
    ></b-popover>

    <b-popover
      target="Popover2"
      placement="top"
      title="rateyourmusic.com"
      triggers="hover focus"
      content="Rate Your Music是一个国际性的元数据资料库网站，在这里全世界的音乐唱片都可以被用户添加、打分和评论（封大陆IP，访问需梯子）"
    ></b-popover>
    <!--
    <b-popover
      target="Popover3"
      placement="top"
      title="https://www.albumoftheyear.org"
      triggers="hover focus"
      content="Pitchfork是美国的独立音乐信息杂志平台，在国际音乐界有相当高的知名度，拥有大量的专家评论、特稿、专栏、排行榜和新专辑信息等"
    ></b-popover>
	-->
	<b-popover
      target="Popover3"
      placement="top"
      title="www.albumoftheyear.org"
      triggers="hover focus"
      content="Album Of The Year是一个收录各媒体乐评的综评网站，并通过积分算法对专辑进行排名，用户也可发表自己的意见，兼顾专业性和大众化"
    ></b-popover>

    <b-popover
      target="Popover4"
      placement="top"
      title="关于站长"
      triggers="hover focus"
      content="站长的个人介绍和联系方式"
    ></b-popover>

    <b-popover
      target="Popover5"
      placement="bottom"
      title="高级搜索"
      triggers="hover focus"
      content="可根据星级评分和类别筛选专辑"
    ></b-popover>

    <!--<b-popover target="Popover6"
            placement="bottom"
            title="后台管理"
            triggers="hover focus"
            content="Xadmin">
        </b-popover>
        
        <b-popover target="Popover7"
            placement="bottom"
            title="数据库管理"
            triggers="hover focus"
            content="phpMyAdmin">
    </b-popover>-->
  </div>
</template>

<script>
var regAlbum = /^《.*》$/g;
//import Loading from './components/Loading.vue'
import { mapState, mapGetters, mapMutations, mapActions } from 'vuex';
export default {
  name: 'App',
  //components: { Loading },
  data() {
    return {
      commentList: [],
      num_comments: 0,
      num_img: 0,
      num_album: 0,
      num_studio: 0,
	  num_live: 0,
      num_compilation: 0,
      num_video: 0,
      parent: '',
      searchVal: '',
      searchVal_artist: '',
      searchVal_album: '',
      fuzzy_list: [],
      category: '',
      artist: '',
      artistList: [],
      user: '',
      login: false,
      code: '',
      message: '',
    };
  },
  computed: {
    showLoading() {
      //return this.$store.state.showLoading
      return this.$store.getters.getState;
    },
    //...mapState(['showLoading']),
    //...mapGetters(['getState']),
    //...mapState({
    //	'showLoading':state => state.showLoading
    //}),
  },
  mounted: function() {
    this.checkStatus();
    this.listComments();
  },
  methods: {
    getData: async function(loader) {
      await this.$store.dispatch(loader);
    },
    checkStatus: async function() {
      await this.$axios
        .get('/api/status/', { params: { showLoading: false, token: true } })
        .then(response => {
          var res = response.data;
          this.code = res.code;
          if (res.code == '401') {
            this.login = false;
          } else {
            this.login = true;
            this.user = res.user;
          }
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    listComments() {
      this.$axios
        .get('/api/comments-num/', { params: { showLoading: false } })
        .then(response => {
          var res = response.data;
          this.num_comments = res.num_comments;
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    search() {
      if (this.searchVal.length < 1) {
        this.message = '请输入搜索内容';
        this.$refs.myWarning.show();
        return;
      }
      this.$router.push({
        path: '/search',
        query: {
          searchVal: this.searchVal,
        },
      });
    },
    searchArtist() {
      this.$axios
        .get('/api/artists-search/', { params: { artist: this.searchVal_artist, showLoading: false } })
        .then(response => {
          var res = response.data;
          if (res.name == '') {
            this.$refs.myWarning1.show();
          } else {
            this.artist = res;
            this.$router.push({
              path: '/artist/' + this.artist.alias,
              query: {
                id: 'artist',
                name: this.artist.alias,
              },
            });
          }
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    searchAlbum() {
      this.$axios
        .get('/api/albums-search/', { params: { album: this.searchVal_album, showLoading: false } })
        .then(response => {
          var res = response.data;
          if (res.name == '') {
            //window.alert("未搜索到相关专辑");
            this.$refs.myWarning2.show();
          } else {
            this.album = res;
            this.$router.push({
              path: '/artist/' + this.album.artist.alias + '/album',
              query: {
                name: this.album.name.replace(/ /g, '-'),
                category: this.album.category1,
                artist: this.album.artist.alias,
              },
            });
          }
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    searchAll() {
      if (regAlbum.test(this.searchVal)) {
        this.$axios
          .get('/api/albums-search/', { params: { album: this.searchVal, showLoading: false } })
          .then(response => {
            var res = response.data;
            if (res.name == '') {
              //window.alert("未搜索到相关专辑");
              this.message = '未搜索到相关专辑';
              this.$refs.myWarning.show();
            } else {
              this.album = res;
              this.$router.push({
                path: '/artist/' + this.album.artist.alias + '/album',
                query: {
                  name: this.album.name.replace(/ /g, '-'),
                  category: this.album.category1,
                  artist: this.album.artist.alias,
                },
              });
            }
          })
          .catch(function(error) {
            console.log(error);
          });
      } else if (this.searchVal) {
        this.$axios
          .get('/api/artists-search/', { params: { artist: this.searchVal, showLoading: false } })
          .then(response => {
            var res = response.data;
            if (res.name == '') {
              this.message = '未搜索到相关乐队';
              this.$refs.myWarning.show();
            } else {
              this.artist = res;
              this.$router.push({
                path: '/artist/' + this.artist.alias,
                query: {
                  id: 'artist',
                  name: this.artist.alias,
                },
              });
            }
          })
          .catch(function(error) {
            console.log(error);
          });
      } else {
        this.message = '请输入搜索内容';
        this.$refs.myWarning.show();
      }
    },
    refreshComment(val) {
      //this.num_comments = val;
	  //console.log(val);
    },
    showCategory(val) {
      if (val == 'britpop') {
        this.category = '英伦摇滚乐';
      } else if (val == 'scotland') {
        this.category = '苏格兰流行乐';
      } else if (val == 'shoegaze') {
        this.category = '自赏派音乐';
      } else if (val == 'ireland') {
        this.category = '爱尔兰流行乐';
      } else if (val == 'electronic') {
        this.category = '英国电子乐';
      } else if (val == 'classic') {
        this.category = '经典老摇滚';
      } else if (val == 'female') {
        this.category = '英伦玫瑰';
      } else if (val == 'male') {
        this.category = '英伦男歌手';
      } else if (val == 'indie') {
        this.category = '新生代独立音乐';
      }
      this.$axios
        .get('/api/artists/', { params: { category: val, showLoading: true } })
        .then(response => {
          var res = response.data;
          this.artistList = res;
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    showArtist(val) {
      this.artist = val;
    },
    focus_artist: function() {
      if (document.querySelector('.artist') == document.activeElement) {
        this.fuzzy_search_artist(this.searchVal_artist.trim());
      }
    },
    focus_album: function() {
      if (document.querySelector('.album') == document.activeElement) {
        this.fuzzy_search_album(this.searchVal_album.trim());
      }
    },
    focus_all: function() {
      if (document.querySelector('.search') == document.activeElement) {
        this.fuzzy_search_all(this.searchVal.trim());
      }
    },
    fuzzy_search_artist: function(value) {
      var that = this;
      if (!value) {
        that.fuzzy_list = [];
        return;
      }
      //调取接口
      this.$axios
        .get('/api/artists-fuzzy/', { params: { artist: this.searchVal_artist, showLoading: false } })
        .then(response => {
          var res = response.data;
          that.fuzzy_list = res;
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    fuzzy_search_album: function(value) {
      var that = this;
      if (!value) {
        that.fuzzy_list = [];
        return;
      }
      //调取接口
      this.$axios
        .get('/api/albums-fuzzy/', { params: { album: this.searchVal_album, showLoading: false } })
        .then(response => {
          var res = response.data;
          that.fuzzy_list = res;
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    fuzzy_search_all: function(value) {
      var that = this;
      if (!value) {
        that.fuzzy_list = [];
        return;
      }
      //调取接口
      this.$axios
        .get('/api/search-fuzzy/', { params: { searchVal: this.searchVal, showLoading: false } })
        .then(response => {
          var res = response.data;
          that.fuzzy_list = res;
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    logout: function() {
      localStorage.removeItem('accessToken');
      this.$router.push({
        path: '/login',
      });
    },
    numImages(val) {
      this.num_img = val;
    },
    numAlbums(val) {
      this.num_album = val.album;
      this.num_studio = val.studio;
	  this.num_live = val.live;
      this.num_compilation = val.compilation;
      this.num_video = val.video;
    },
	show_tooltip1() {
		setTimeout(() => {
			this.$refs.tooltip1.$emit('open')
		}, 500);
		setTimeout(() => {
			this.$refs.tooltip1.$emit('close')
			this.$refs.tooltip1.$emit('disable')
		}, 4500);
    },
	hide_tooltip1() {
		setTimeout(() => {
			this.$refs.tooltip1.$emit('close')
			this.$refs.tooltip1.$emit('disable')
		}, 500);
    },
  },
  watch: {
    // 如果路由有变化，会再次执行该方法
    // "$route": "listComments",
    $route(to, from) {
      //this.$router.go(0)
      this.category = '';
      this.artist = '';
	  this.listComments();
      this.checkStatus();
    },
    searchVal_artist: function() {
      this.focus_artist();
    },
    searchVal_album: function() {
      this.focus_album();
    },
    artist: function() {
      this.focus_artist();
    },
    album: function() {
      this.focus_album();
    },
    searchVal: function() {
      this.focus_all();
    },
  },
};
</script>

<style>
.footer p {
  height: 16px;
  color: #70dca6;
  font-family: Segoe UI, Microsoft Yahei, Verdana, Helvetica Neue, Tahoma, Arial, sans-serif;
  font-size: 12px;
  font-weight: 500;
  margin-top: 5px;
}

.transitionRouter-enter-active,
.transitionRouter-leave-active {
  transition: opacity 0.5s;
}

.transitionRouter-enter,
.transitionRouter-leave {
  transform: opacity 0;
}

.transitionRouter1-enter-active,
.transitionRouter1-leave-active {
  transition: all 2s;
}

.transitionRouter1-enter,
.transitionRouter1-leave {
  transform: translate3d(100%, 0, 0);
}

option {
  font-size: 10px;
  font-weight: normal;
  display: block;
  white-space: pre;
  min-height: 14px;
  padding: 2px 2px 2px;
}

ul.dropdown-menu.dropdown-menu-right {
  display: block;
}
</style>



